<template>
    <div>
        名称
        <input type="text" name="" id="" v-model="page.name">
        <select v-model="page.id">
<option value="0">请选择</option>
<option :value="a.id" v-for="a in lists">{{ a.tname }}</option>
                </select>
                
        <input type="button" value="查询" @click="show">
        <table>
            <thead>
                <tr>
                    <td>编号</td>
                    <td>食谱标题</td>
                    <td>分类</td>
                    <td>图片</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in list">                  
                    <td>{{a.fid}}</td>
                    <td>{{a.fname }}</td>
                    <td>{{ a.tid}}</td>
                    <td><img :src="'https://localhost:7019/'+a.img" width="200px" height="100px" alt=""></td>                
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';

onMounted(()=>{
    show()
    band()
})
const show=()=>{
    axios.get('https://localhost:7019/api/Food/Show',{params:page.value}).then(res=>{
       list.value=res.data
      

    })
}
const page=ref({
   name:"",
   id:0

})
const list=ref([{
   "fid": 0,
    "fname": "",
    "tid": 0,
    "img": ""
}])
const lists=ref([{
    "id": 0,
    "tname": ""
}])
const band=()=>{
    axios.get('https://localhost:7019/api/Type').then(res=>{
lists.value=res.data
        
     })
}
</script>

<style scoped>

</style>